<template>
  <div class="kqyichanggl">
    <span class="breadcrumb">
      <router-link to="/main/renshi/kaoqing/kqguanli" style="margin-top: 10px;">返回</router-link>
      <router-link to="/main/renshi/kaoqing/kqguanli/kqyichanggl-list" style="margin-top: 10px;">列表</router-link>
    </span>
    <h2>异常考勤确认表</h2>
    <div style="padding: 10px 0;display: flex;justify-content: flex-end;">
      <button @click="addRecord">新增</button>&emsp;
      <button @click="deleteSelectedRecords">批量删除</button>&emsp;
      <button @click="saveData">保存</button>
    </div>
    <div class="form-container">
      <table border="1" style="text-align: center;">
        <thead>
          <tr>
            <th rowspan="2"><input type="checkbox" @change="toggleSelectAll" v-model="selectAll"></th>
            <th rowspan="2">序号</th>
            <th rowspan="2">班组</th>
            <th rowspan="2">工号</th>
            <th rowspan="2">姓名</th>
            <th rowspan="2">日期</th>
            <th colspan="2">班一</th>
            <th colspan="2">班二</th>
            <th colspan="2">班三</th>
            <th colspan="2">附加班一</th>
            <th colspan="2">附加班二</th>
            <th colspan="2">附加班三</th>
            <th colspan="2">迟到</th>
            <th colspan="2">早退</th>
            <th colspan="2">旷工</th>
            <th rowspan="2">正班出勤时间</th>
            <th rowspan="2">员工确认</th>
            <th rowspan="2">直接上级确认</th>
            <th rowspan="2">部门经理确认</th>
            <th rowspan="2">(注明)考勤异常原因</th>
          </tr>
          <tr>
            <td>上</td>
            <td>下</td>
            <td>上</td>
            <td>下</td>
            <td>上</td>
            <td>下</td>
            <td>上</td>
            <td>下</td>
            <td>上</td>
            <td>下</td>
            <td>上</td>
            <td>下</td>
            <td>时间</td>
            <td>次数</td>
            <td>时间</td>
            <td>次数</td>
            <td>时间</td>
            <td>次数</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(record, index) in attendanceRecords" :key="index">
            <td><input type="checkbox" v-model="selectedRecords" :value="index" @change="updateSelectAll" /></td>
            <td>{{ index + 1 }}</td>
            <td><input v-model="record.workGroup" /></td>
            <td><input v-model="record.employeeId" /></td>
            <td><input v-model="record.name" /></td>
            <td><input v-model="record.date" type="date" /></td>
            <td><input v-model="record.shift1Start" /></td>
            <td><input v-model="record.shift1End" /></td>
            <td><input v-model="record.shift2Start" /></td>
            <td><input v-model="record.shift2End" /></td>
            <td><input v-model="record.shift3Start" /></td>
            <td><input v-model="record.shift3End" /></td>
            <td><input v-model="record.extraShift1Start" /></td>
            <td><input v-model="record.extraShift1End" /></td>
            <td><input v-model="record.extraShift2Start" /></td>
            <td><input v-model="record.extraShift2End" /></td>
            <td><input v-model="record.extraShift3Start" /></td>
            <td><input v-model="record.extraShift3End" /></td>
            <td><input v-model="record.lateTime" /></td>
            <td><input v-model="record.lateCount" type="number" /></td>
            <td><input v-model="record.earlyLeaveTime" /></td>
            <td><input v-model="record.earlyLeaveCount" type="number" /></td>
            <td><input v-model="record.absenteeismTime" /></td>
            <td><input v-model="record.absenteeismCount" type="number" /></td>
            <td><input v-model="record.regularAttendanceTime" /></td>
            <td><input v-model="record.employeeConfirmation" /></td>
            <td><input v-model="record.superiorConfirmation" /></td>
            <td><input v-model="record.managerConfirmation" /></td>
            <td><input v-model="record.abnormalReason" /></td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- <p>保存期限：长期</p> -->
  </div>
</template>
<script>
import { batchSaveAbnormalAttendance, getAbnormalAttendanceDetail } from '@/api/abnormalAttendance';

export default {
  data() {
    return {
      attendanceRecords: [
        this.getEmptyRecord()
      ],
      selectedRecords: [],
      selectAll: false,
      isEdit: false,
      editId: null
    };
  },
  created() {
    // 检查是否是编辑模式
    const id = this.$route.query.id;
    if (id) {
      this.isEdit = true;
      this.editId = id;
      this.fetchDetail(id);
    }
  },
  methods: {
    getEmptyRecord() {
      return {
        workGroup: '',
        employeeId: '',
        name: '',
        date: '',
        shift1Start: '',
        shift1End: '',
        shift2Start: '',
        shift2End: '',
        shift3Start: '',
        shift3End: '',
        extraShift1Start: '',
        extraShift1End: '',
        extraShift2Start: '',
        extraShift2End: '',
        extraShift3Start: '',
        extraShift3End: '',
        lateTime: '',
        lateCount: 0,
        earlyLeaveTime: '',
        earlyLeaveCount: 0,
        absenteeismTime: '',
        absenteeismCount: 0,
        regularAttendanceTime: '',
        employeeConfirmation: '',
        superiorConfirmation: '',
        managerConfirmation: '',
        abnormalReason: ''
      };
    },
    async fetchDetail(id) {
      try {
        const response = await getAbnormalAttendanceDetail(id);
        const data = response.data;
        // 设置表单数据
        this.attendanceRecords = [{
          id: data.id,
          workGroup: data.workGroup,
          employeeId: data.employeeId,
          name: data.name,
          date: data.date ? data.date.split('T')[0] : '',
          shift1Start: data.shift1Start,
          shift1End: data.shift1End,
          shift2Start: data.shift2Start,
          shift2End: data.shift2End,
          shift3Start: data.shift3Start,
          shift3End: data.shift3End,
          extraShift1Start: data.extraShift1Start,
          extraShift1End: data.extraShift1End,
          extraShift2Start: data.extraShift2Start,
          extraShift2End: data.extraShift2End,
          extraShift3Start: data.extraShift3Start,
          extraShift3End: data.extraShift3End,
          lateTime: data.lateTime,
          lateCount: data.lateCount,
          earlyLeaveTime: data.earlyLeaveTime,
          earlyLeaveCount: data.earlyLeaveCount,
          absenteeismTime: data.absenteeismTime,
          absenteeismCount: data.absenteeismCount,
          regularAttendanceTime: data.regularAttendanceTime,
          employeeConfirmation: data.employeeConfirmation,
          superiorConfirmation: data.superiorConfirmation,
          managerConfirmation: data.managerConfirmation,
          abnormalReason: data.abnormalReason
        }];
      } catch (error) {
        this.$message.error('获取详情失败：' + error.message);
      }
    },
    toggleSelectAll() {
      if (this.selectAll) {
        this.selectedRecords = this.attendanceRecords.map((_, index) => index);
      } else {
        this.selectedRecords = [];
      }
    },
    updateSelectAll() {
      this.selectAll = this.selectedRecords.length === this.attendanceRecords.length;
    },
    deleteSelectedRecords() {
      if (confirm('确定要删除选中的记录吗？')) {
        this.selectedRecords.sort((a, b) => b - a).forEach(index => {
          this.attendanceRecords.splice(index, 1);
        });
        this.selectedRecords = [];
        this.selectAll = false;
      }
    },
    addRecord() {
      this.attendanceRecords.push(this.getEmptyRecord());
      this.updateSelectAll();
    },
    async saveData() {
      try {
        if (this.attendanceRecords.length === 0) {
          this.$message.error('请至少添加一条记录');
          return;
        }

        // 验证必填字段
        for (const record of this.attendanceRecords) {
          if (!record.employeeId) throw new Error('请填写工号');
          if (!record.name) throw new Error('请填写姓名');
          if (!record.date) throw new Error('请选择日期');
        }

        await batchSaveAbnormalAttendance(this.attendanceRecords);
        this.$message.success('保存成功');
        this.$router.push('/main/renshi/kaoqing/kqguanli/kqyichanggl-list');
      } catch (error) {
        this.$message.error('保存失败：' + error.message);
      }
    }
  }
};
</script>
<style scoped>
.kqyichanggl {
  width: 1200px;
  max-width: 1200px;
  margin: 0 auto;
  height: 100vh;
}

.breadcrumb {
  display: flex;
  justify-content: space-between;
}

.form-container {
  max-width: 1200px;
  overflow: auto;
  height: 470px;
  max-height: 470px;
}

table {
  border-collapse: collapse;
  width: 200%;
}

th,
td {
  border: 1px solid #000;
  padding: 8px;
  white-space: nowrap;
}

input {
  text-align: center;
  width: 100%;
}
</style>